<template>
  <div class="app-container">
    <u-page title="周报数据">
      <div slot="header">
        <el-button type="primary" icon="el-icon-refresh" @click="queryWeeklyList">
          刷新
        </el-button>
      </div>
      <u-table
        :data="weeklyList"
        :loading="listLoading1"
        :options="listOptions"
        :columns="columns"
        :pagination.sync="weeklyListQuery"
        :fetch="queryWeeklyList"
      >
        <template v-slot:right>
          <el-table-column label="操作" align="center" fixed="right">
            <template slot-scope="{ row }">
              <el-button type="text" @click="downloadAttachment(row)">下载</el-button>
            </template>
          </el-table-column>
        </template>
      </u-table>
    </u-page>
    <div style="height:15px;"></div>
    <u-page title="月报数据">
      <div slot="header">
        <el-button type="primary" icon="el-icon-refresh" @click="queryMonthlyList">
          刷新
        </el-button>
      </div>
      <u-table
        :data="monthlyList"
        :loading="listLoading2"
        :options="listOptions"
        :columns="columns"
        :pagination.sync="monthlyListQuery"
        :fetch="queryMonthlyList"
      >
        <template v-slot:right>
          <el-table-column label="操作" align="center" fixed="right">
            <template slot-scope="{ row }">
              <el-button type="text" @click="downloadAttachment(row)">下载</el-button>
            </template>
          </el-table-column>
        </template>
      </u-table>
    </u-page>

    <div style="height:15px;"></div>
    <u-page title="其他月报数据">
      <div slot="header">
        <el-button type="primary" icon="el-icon-refresh" @click="queryMonthlyOtherList">
          刷新
        </el-button>
      </div>
      <u-table
        :data="monthlyOtherList"
        :loading="listLoading3"
        :options="listOptions"
        :columns="columnsOther"
        :pagination.sync="monthlyOtherListQuery"
        :fetch="queryMonthlyOtherList"
      >
      </u-table>
    </u-page>
  </div>
</template>

<script>
export default {
  data() {
    return {
      api: this.$u.api.DataDownload,

      monthlyListQuery: {
        page: 1,
        pageSize: 10,
        totalCount: 1,
        filetype: 'monthly',
        disabled: true
      },
      weeklyListQuery: {
        page: 1,
        pageSize: 10,
        totalCount: 1,
        filetype: 'weekly',
        disabled: true
      },
      monthlyOtherListQuery: {
        page: 1,
        pageSize: 10,
        totalCount: 1
      },
      listLoading1: false,
      listLoading2: false,
      listLoading3: false,
      weeklyList: [],
      monthlyList: [],
      monthlyOtherList: [],
      listOptions: {
        stripe: true
      },
      // 表格
      columns: [
        {
          prop: 'datatype',
          label: '数据类型',
          render: (h, params) => {
            if (params.row.datatype === 'vipConsume') {
              return h('el-tag', { props: { type: 'success' }}, '会员消费')
            } else if (params.row.datatype === 'parkVipConsume') {
              return h('el-tag', '停车会员消费')
            } else if (params.row.datatype === 'newVip') {
              return h('el-tag', { props: { type: 'warning' }}, '新注册会员明细')
            } else if (params.row.datatype === 'jieDian') {
              return h('el-tag', { props: { type: 'danger' }}, '街电数据')
            }
          }
        },
        {
          prop: 'filename',
          label: '文件名称'
        },
        {
          prop: 'createdAt',
          label: '生成时间',
          timestamp: true
        }
      ],
      columnsOther: [
        {
          prop: 'newCard102',
          label: '新升级红宝石卡数量'
        },
        {
          prop: 'newCard103',
          label: '新升级钻石卡数量'
        },
        {
          prop: 'card104',
          label: '微会员数量'
        },
        {
          prop: 'card101',
          label: '金卡数量'
        },
        {
          prop: 'card102',
          label: '红宝石数量'
        },
        {
          prop: 'card103',
          label: '钻石卡数量'
        },
        {
          prop: 'consumersDateRange',
          label: '消费时间范围'
        },
        {
          prop: 'consumers',
          label: '消费会员数量'
        },
        {
          prop: 'createdAt',
          label: '生成时间',
          timestamp: true
        }
      ],
      // 开关设置查询不需要分页列表数据
      listState: false
    }
  },
  mounted() {
  },
  created() {
    this.queryWeeklyList()
    this.queryMonthlyList()
    this.queryMonthlyOtherList()
  },
  methods: {
    downloadAttachment(row) {
      const root = 'https://csms.chiconysquare.net/attachment/dataFile/'
      // const root = 'http://localhost:75/attachment/dataFile/'
      const a = document.createElement('a')
      a.href = root + row.filetype + '/' + row.filename
      a.download = row.filename// 设置下载文件的名称
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
    },
    queryWeeklyList() {
      const self = this
      // 打开加载状态
      self.listLoading1 = true
      if (self.listState) {
        // 查询列表数据
        self.api.list(self.weeklyListQuery).then(res => {
          // 获取列表数据
          self.weeklyList = res.data
          // 关闭加载状态
          setTimeout(() => {
            self.listLoading1 = false
          }, 0.5 * 1000)
        })
      } else {
        // 查询分页数据
        self.api.list(self.weeklyListQuery).then(res => {
          // 获取分页列表数据
          self.weeklyList = res.data.list
          // 获取分页数据,总页数
          self.weeklyListQuery.totalCount = res.data.totalCount
          // 关闭加载状态
          setTimeout(() => {
            self.listLoading1 = false
          }, 0.5 * 1000)
        })
      }
    },
    queryMonthlyList() {
      const self = this
      // 打开加载状态
      self.listLoading2 = true
      if (self.listState) {
        // 查询列表数据
        self.api.list(self.monthlyListQuery).then(res => {
          // 获取列表数据
          self.monthlyList = res.data
          // 关闭加载状态
          setTimeout(() => {
            self.listLoading2 = false
          }, 0.5 * 1000)
        })
      } else {
        // 查询分页数据
        self.api.list(self.monthlyListQuery).then(res => {
          // 获取分页列表数据
          self.monthlyList = res.data.list
          // 获取分页数据,总页数
          self.monthlyListQuery.totalCount = res.data.totalCount
          // 关闭加载状态
          setTimeout(() => {
            self.listLoading2 = false
          }, 0.5 * 1000)
        })
      }
    },
    queryMonthlyOtherList() {
      const self = this
      // 打开加载状态
      self.listLoading3 = true
      if (self.listState) {
        // 查询列表数据
        self.api.otherList(self.monthlyOtherListQuery).then(res => {
          // 获取列表数据
          self.monthlyOtherList = res.data
          // 关闭加载状态
          setTimeout(() => {
            self.listLoading3 = false
          }, 0.5 * 1000)
        })
      } else {
        // 查询分页数据
        self.api.otherList(self.monthlyOtherListQuery).then(res => {
          // 获取分页列表数据
          self.monthlyOtherList = res.data.list
          // 获取分页数据,总页数
          self.monthlyOtherListQuery.totalCount = res.data.totalCount
          // 关闭加载状态
          setTimeout(() => {
            self.listLoading3 = false
          }, 0.5 * 1000)
        })
      }
    }
  }
};
</script>
